<fieldset>
    <legend>条件搜索</legend>
    <form action="{:request()->url()}" autocomplete="off" data-table-id="TablesIndexTable" class="layui-form layui-form-pane form-search" method="get" onsubmit="return false">
        
		<div class="layui-form-item layui-inline">
            <label class="layui-form-label">表名</label>
            <label class="layui-input-inline">
                <input class="layui-input" name="table_name" placeholder="请输入 表名" value="{$get.table_name|default=''}">
            </label>
        </div>

        <div class="layui-form-item layui-inline">
            <label class="layui-form-label">描述</label>
            <label class="layui-input-inline">
                <input class="layui-input" name="table_comment" placeholder="请输入 字段描述" value="{$get.table_comment|default=''}">
            </label>
        </div>

        <div class="layui-form-item layui-inline">
            <button class="layui-btn layui-btn-primary"><i class="layui-icon">&#xe615;</i> 搜 索</button>
			
			<a class="layui-btn layui-btn-primary" data-search-reset><i class="layui-icon layui-icon-refresh-3"></i> 重 置 查 询</></a>
        </div>
    </form>
</fieldset>

<script>
    layui.form.render();
	require(['jquery.autocompleter'], function () {
		$('input[name=table_name]').autocompleter({
		    limit: 6, highlightMatches: true, template: '{{ label }} <span> - {{ title }} </span>', callback: function (name) {
		        $('input[name=table_name]').val(name);
		    }, source: (function (subjects, data) {
		        for (var i in subjects) data.push({value: subjects[i].table_name, label: subjects[i].table_name, title: subjects[i].table_comment});
		        return data;
		    })(JSON.parse('{$table_names|raw|json_encode}'), [])
		});
		$('input[name=table_comment]').autocompleter({
		    limit: 6, highlightMatches: true, template: '{{ label }} <span> - {{ title }} </span>', callback: function (name) {
		        $('input[name=table_comment]').val(name);
		    }, source: (function (subjects, data) {
		        for (var i in subjects) data.push({value: subjects[i].table_comment, label: subjects[i].table_comment, title: subjects[i].table_name});
		        return data;
		    })(JSON.parse('{$table_names|raw|json_encode}'), [])
		});
	});
	
	// 监听 data-search-reset 事件
	$(document).on('click', 'form.form-search [data-search-reset]', function () {
	    let form = $(this).closest('form.form-search')[0];
	    if (form) {
	    	form.reset();
	    	$(form).trigger('submit'); // 重置表单后触发提交事件
	    }
	});
</script>
